<template>
	<view class="mine-menu-container">
		<view class="menu-titel">
			<text>我的菜谱</text>
		</view>
		<view class="menu-info-container">
			<template v-for="item in collectionsData" :key="item._id">
					<view  class="menu-img" >
						<image :src="item.imagePath" mode=""></image>
						<view >
							<text class="menu-text">{{item.name}}</text>
						</view>
					</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getCollectionsApi
	} from '../../api/mine';

	const collectionsData = ref([]);

	onMounted(() => {
		getCollections();
	})
	
	

	
	function getCollections() {
		getCollectionsApi({
			_id: '6512820a4700cfe4ef3ac850'
		}).then(res => {
			if (res.code == 200) {
				collectionsData.value = res.data;
				console.log(collectionsData.value);
			}
		})
	};
</script>

<style scoped lang="scss">
	.mine-menu-container {
		margin: 20rpx 0;
		padding: 0 34rpx;
		background-color: #ffffff;

		.menu-titel {
			height: 40rpx;
			margin-bottom: 26rpx;
			text {
				font-size: 28rpx;
				color: #5a5a5a;
			}
		}

		image {
			width: 172rpx;
			height: 208rpx;
			border-radius: 22rpx;
		}
	}
	.menu-info-container{
	display: flex;
	justify-content: space-around;
	}
	.menu-img{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 172rpx;
		margin-right: 32rpx;
		.menu-text{
			font-size: 18rpx;
			color: #5a5a5a;
		}
	}
</style>